<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else>{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                levelList: []
            }
        },
        watch: {
            $route() {
                this.getMenuListBreadCrumb()
            }
        },
        created() {
            this.getMenuListBreadCrumb()
        },
        methods: {
            getMenuListBreadCrumb() {
                let matched = this.$route.matched.filter(item => item.meta && item.meta.title && item.name)
                const first = matched[0]

                if (!this.isDashboard(first)) {
                    matched = [{path: '/dashboard', meta: {title: 'Dashboard'}}].concat(matched)
                }
                this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

            },
            isDashboard(route) {
                const name = route && route.name
                if (!name) {
                    return false
                }
                return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
            },
        }
    }
</script>

<style scoped>

</style>
